<template>
  <div class="goods-list-container">

    <!-- 顶部功能按钮 -->
    <toggle-button-box @sendgoodslookstyle="getGoodsLookStyle" @show-goods-category="showCategory" @show-goods-add-from="showGoodsAddFrom" ></toggle-button-box>

    <!-- 商品管理 -->
    <goods-list-block v-if="isShow == 1" @send-goods-id="getSendGoodsId" ></goods-list-block>
    <goods-list-table v-if="isShow == 2"></goods-list-table>

    <!-- 底部分页按钮 -->
<!--    <goods-paging-button v-if="isShow  3"></goods-paging-button>-->

    <!-- 商品分类页 -->
    <category-list v-if="isShow == 3"></category-list>

    <!-- 商品添加 -->
    <goods-add-form v-bind:addgoodid="goodsId" v-if="isShow == 4" @show-me-goods="showGoodsList"></goods-add-form>

  </div>

</template>

<script>
module.exports = {
  data() {
    return {
      isShow: 2,
      goodsId: null,
    }
  },
  methods: {
    getGoodsLookStyle(showId) {
      this.isShow = showId;
    },
    showCategory(showId) {
      this.isShow = showId;
    },
    showGoodsAddFrom(showId){
      this.isShow = showId;
    },
    showGoodsList(showId){
      this.isShow = showId;
    },
    getSendGoodsId(goodsId){
      this.goodsId = goodsId;
      this.isShow = 4;
    }
  }
}
</script>

<style>
.goods-list-container {
  margin: 80px 20px 20px 15px;
  padding-left: 236px;
  background-color: #efefef;
}
</style>